<script setup>
import { onBeforeMount, onMounted, reactive } from "vue";
import { getHomeData as getHomeDataApi } from "@/api/home";
import { getImageUrl } from "@/utils";
import SearchView from "@/components/SearchView.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const state = reactive({
  homeData: {},
  city: "",
});
// 获取当前城市
const getCityLocation = () => {
  AMap.plugin("AMap.CitySearch", function () {
    var citySearch = new AMap.CitySearch();
    citySearch.getLocalCity(function (status, result) {
      if (status === "complete" && result.info === "OK") {
        // 查询成功，result即为当前所在城市信息
        console.log("result=>", result);
        state.city = result.city;
      }
    });
  });
};
onMounted(() => {
  getCityLocation();
});

const getHomeData = async () => {
  const res = await getHomeDataApi();
  state.homeData = res;
};
onBeforeMount(() => {
  getHomeData();
});

const goSearchPage = () => {
  router.push("/searchgoods");
};

// 跳转到 新品首发页面
const goNewGoodsPage = () => {
  // router.push("/newhot");
  router.push({ path: "/newhot", query: { type: "new" } });
};
</script>

<template>
  <div class="home-page">
    <!-- 顶部搜索 -->
    <div class="search-container">
      <SearchView
        class="search-view"
        myshape="round"
        :readonly="true"
        @customclick="goSearchPage"
        @click="goSearchPage"
      ></SearchView>
      <div class="city-container">
        <div class="city">{{ state.city }}</div>
        <van-image
          class="city-drop-down"
          :src="getImageUrl('images/address-drop-down.png')"
          fit="contain"
        />
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="top-swiper">
      <van-swipe class="my-swipe" indicator-color="red">
        <van-swipe-item
          class="item"
          v-for="item in state.homeData.banner"
          :key="item.id"
        >
          <img class="banner-img" :src="item.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 频道 分类 -->
    <div class="channel-category">
      <div
        class="channel"
        v-for="item in state.homeData.channel"
        :key="item.id"
      >
        <van-image class="channel-img" :src="item.icon_url" />
        <div class="channel-name">{{ item.name }}</div>
      </div>
    </div>

    <!-- 品牌制造商 -->
    <div class="brand-container">
      <div class="brand-title">品牌制造商直供</div>
      <div class="brand-list">
        <div
          class="item"
          v-for="item in state.homeData.brandList"
          :key="item.id"
        >
          <div class="info">
            <div class="item-title">{{ item.name }}</div>
            <div class="item-price">{{ item.floor_price }}元起</div>
          </div>
          <div class="img-container">
            <img class="item-img" :src="item.new_pic_url" />
          </div>
        </div>
      </div>
    </div>

    <!-- 新品首发logo -->
    <div class="new-product-logo" @click="goNewGoodsPage">
      <van-image :src="getImageUrl('images/new-product-pic.png')" />
    </div>

    <!-- 新品首发商品列表 -->
    <div class="new-hot-product-list">
      <div
        class="new--hot-product-item"
        v-for="item in state.homeData.newGoods"
        :key="item.id"
      >
        <van-image class="product-img" :src="item.list_pic_url" />
        <div class="product-name">{{ item.name }}</div>
        <div class="product-desc">{{ item.goods_brief }}</div>
        <div class="product-price">￥{{ item.retail_price }}</div>
      </div>
    </div>

    <!-- 人气推荐logo -->
    <RouterLink custom to="/newhot?type=hot" v-slot="{ href, navigate }">
      <div @click="navigate" :url="href" class="new-product-logo">
        <van-image :src="getImageUrl('images/hot-recom-pic.png')" />
      </div>
    </RouterLink>

    <!-- 人气推荐商品列表 -->
    <div class="new-hot-product-list">
      <div
        class="new--hot-product-item"
        v-for="item in state.homeData.hotGoods"
        :key="item.id"
      >
        <van-image class="product-img" :src="item.list_pic_url" />
        <div class="product-name">{{ item.name }}</div>
        <div class="product-desc">{{ item.goods_brief }}</div>
        <div class="product-price">￥{{ item.retail_price }}</div>
      </div>
    </div>

    <!-- 专题精选 -->
    <div class="topic-container">
      <h3 class="topic-title">专题精选</h3>
      <div class="topic-list">
        <div
          class="topic-item"
          v-for="item in state.homeData.topicList"
          :key="item.id"
        >
          <van-image class="topic-img" :src="item.item_pic_url" />
          <div class="topic-info">
            <div class="topic-name">{{ item.title }}</div>
            <div class="topic-price">{{ item.price_info }}元起</div>
          </div>
          <div class="topic-subtitle">{{ item.subtitle }}</div>
        </div>
      </div>
    </div>

    <!-- 商品分类列表 -->
    <div class="product-list">
      <div
        class="item"
        :class="`item-title-${index + 1}`"
        v-for="(item, index) in state.homeData.newCategoryList"
        :key="item.id"
      >
        <div class="title">{{ item.name }}好物</div>
        <div class="product-container">
          <div
            class="product-item"
            v-for="product in item.goodsList"
            :key="product.id"
          >
            <van-image class="product-img" :src="product.list_pic_url" />
            <div class="product-name">
              {{ product.name }}
            </div>
            <div class="product-price">¥{{ product.retail_price }}</div>
          </div>
          <!-- 最后的连接 -->
          <div class="last-link">
            <div class="link-title">{{ item.name }}好物</div>
            <van-image
              class="next-icon"
              :src="getImageUrl('images/next-home-icon.png')"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// @import "@/assets/common.scss";
@use "@/assets/common.scss" as *;
@use "sass:list";
// sass 语法声明的数组
$linearGradients: linear-gradient(135deg, #296aff 0%, #52c5ff 100%),
  linear-gradient(140deg, #fca334 0%, #fdd036 100%),
  linear-gradient(-41deg, rgba(149, 255, 0, 0.95) 0%, #4fcb11 100%),
  linear-gradient(-41deg, rgba(68, 240, 255, 0.95) 0%, #009ad0 100%),
  linear-gradient(90deg, #8b3af7 17%, #f16cff 83%),
  linear-gradient(90deg, #ff74a5 18%, #ffbfcd 83%),
  linear-gradient(144deg, #5c51eb 0%, #a097ff 100%),
  linear-gradient(-40deg, #ffc781 0%, #ff9650 100%),
  linear-gradient(-41deg, rgba(196, 222, 37, 0.95) 0%, #4ab216 100%);
.home-page {
  padding-bottom: 100px;
  // 顶部搜索
  .search-container {
    background-color: #fff;
    padding: 8px 20px 32px;
    display: flex;
    justify-content: space-between;
    .search-view {
      flex: 1;
      margin-right: 46px;
    }
    .city-container {
      display: flex;
      align-items: center;
      .city {
        @include textOverFlow;
        width: 90px;
        font-family: PingFangSC-Regular;
        font-size: 30px;
        color: #333333;
      }
      .city-drop-down {
        width: 15px;
        height: 13px;
        margin-left: 15px;
      }
    }
  }
  // 轮播图
  .top-swiper {
    background-color: #fff;
    .my-swipe {
      width: 710px;
      height: 343px;
      margin-left: 20px;
      :deep(.van-swipe__indicator) {
        background-color: blue;
        opacity: 0.5;
      }
      .item {
        .banner-img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  // 频道 分类
  .channel-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 44.5px;
    background-color: #fff;
    .channel {
      margin-top: 47px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .channel-img {
        width: 69px;
        height: 69px;
        vertical-align: top;
      }
      .channel-name {
        font-family: PingFangSC-Regular;
        font-size: 26px;
        text-align: center;
        margin-top: 16px;
        padding-bottom: 50px;
      }
    }
  }
  // 品牌制造商
  .brand-container {
    margin-top: 19px;
    padding: 0 20px;
    width: 750px;
    height: 570px;
    background-color: #fff;
    overflow: hidden;
    .brand-title {
      margin-top: 41px;
      font-family: PingFangSC-Semibold;
      font-size: 38px;
      color: #333333;
      font-weight: 600;
      text-align: center;
    }
    .brand-list {
      margin-top: 33px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .item {
        position: relative;
        width: 350px;
        height: 196px;
        background-color: #e9eef1;
        margin-bottom: 10px;
        .info {
          position: absolute;
          z-index: 2;
          .item-title {
            margin-top: 33px;
            margin-left: 23px;
            font-family: PingFangSC-Medium;
            font-size: 30px;
            color: #333333;
            font-weight: 500;
          }
          .item-price {
            margin-left: 23px;
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #999999;
          }
        }

        .img-container {
          position: absolute;
          width: 350px;
          height: 196px;
          .item-img {
            width: 350px;
            height: 196px;
          }
        }

        &:nth-child(1) {
          order: 1;
        }
        &:nth-child(2) {
          order: 4;
        }
        &:nth-child(3) {
          order: 3;
          background-color: #f4f4f4;
        }
        &:nth-child(4) {
          order: 2;
          background-color: #f4f4f4;
        }
      }
    }
  }
  // 新品首发logo
  .new-product-logo {
    margin: 20px auto 0;
    width: 710px;
    height: 242px;
  }
  // 新品首发商品列表
  .new-hot-product-list {
    margin-top: 20px;
    padding-top: 38px;
    padding-bottom: 45px;
    display: flex;
    background-color: #fff;
    overflow-x: scroll; // 在水平方向超出滚动
    .new--hot-product-item {
      width: 269px;
      height: 408px;
      border-right: 1px solid rgba(151, 151, 151, 0.2);
      padding-left: 15px;
      padding-right: 15px;
      .product-img {
        width: 239px;
        height: 239px;
      }
      .product-name {
        @include textOverFlow;
        font-family: PingFangSC-Medium;
        color: #333333;
        font-size: 30px;
        font-weight: 500;
        margin-left: 20px;
      }
      .product-desc {
        @include textOverFlow;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #999999;
        margin-left: 20px;
      }
      .product-price {
        margin-top: 23px;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #9e4242;
        margin-left: 20px;
      }
    }
  }

  // 专题精选
  .topic-container {
    margin-top: 20px;
    background-color: #fff;
    overflow: hidden;
    .topic-title {
      margin-top: 41px;
      margin-bottom: 36px;
      font-family: PingFangSC-Semibold;
      font-size: 38px;
      color: #333333;
      font-weight: 600;
      text-align: center;
    }
    .topic-list {
      display: flex;
      overflow-x: scroll;
      margin: 0 20px;
      margin-bottom: 79px;
      .topic-item {
        width: 556px;
        margin-right: 20px;
        margin-bottom: 10px;
        .topic-img {
          width: 556px;
          height: 309px;
        }
        .topic-info {
          margin-top: 21px;
          display: flex;
          justify-content: space-between;
          .topic-name {
            font-family: PingFangSC-Medium;
            font-size: 30px;
            color: #333333;
            font-weight: 500;
          }
          .topic-price {
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #9e4242;
          }
        }
        .topic-subtitle {
          @include textOverFlow;
          margin-top: 12px;
          width: 216px;
          font-family: PingFangSC-Regular;
          font-size: 24px;
          color: #999999;
        }
      }
    }
  }

  // 商品分类列表
  .product-list {
    padding: 0 20px;
    @for $i from 1 through list.length($linearGradients) {
      .item-title-#{$i} .title:after {
        background-image: list.nth($linearGradients, $i);
      }
    }

    .item {
      // js: for(let i=0;i<arr.length;i++){}
      // sass: @for $i from 1 through length($arr) {}
      // sass : length(数组)  计算数组长度
      // sass : nth(数组, 索引)  取数组的第n个元素

      .title {
        margin-top: 61px;
        margin-bottom: 36px;
        font-family: PingFangSC-Semibold;
        font-size: 38px;
        color: #333333;
        font-weight: 600;
        text-align: center;
        position: relative;
        &:after {
          content: "";
          width: 81px;
          height: 13px;
          position: absolute;
          left: 39%;
          top: 38px;
          z-index: -1;
        }
      }

      .product-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .product-item {
          margin-bottom: 44px;
          .product-img {
            width: 350px;
            height: 350px;
            background-color: #fff;
          }
          .product-name {
            @include textOverFlow;
            margin-top: 17px;
            width: 350px;
            font-family: PingFangSC-Medium;
            color: #333333;
            font-weight: 500;
            font-size: 26px;
          }
          .product-price {
            margin-top: 5px;
            font-family: PingFangSC-Regular;
            color: #9e4242;
            font-size: 26px;
          }
        }
        .last-link {
          align-self: flex-start;
          width: 350px;
          height: 350px;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .link-title {
            font-family: PingFangSC-Regular;
            font-size: 32px;
            color: #666666;
          }
          .next-icon {
            margin-top: 21px;
            width: 58px;
            height: 58px;
          }
        }
      }
    }
  }
}
</style>
